import React from 'react';
import {
  Box,
  TextField,
  Typography,
  Paper,
} from '@mui/material';

interface ContentInfoFormProps {
  title: string;
  textContent: string;
  onChange: (data: { title?: string; textContent?: string }) => void;
}

const ContentInfoForm: React.FC<ContentInfoFormProps> = ({
  title,
  textContent,
  onChange,
}) => {
  return (
    <Box>
      <Typography variant="h6" gutterBottom sx={{ mb: 3, textAlign: 'center' }}>
        填写内容基本信息
      </Typography>

      <Paper elevation={1} sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          {/* 标题输入 */}
          <TextField
            label="标题"
            value={title}
            onChange={(e) => onChange({ title: e.target.value })}
            placeholder="请输入内容标题..."
            fullWidth
            required
            variant="outlined"
            inputProps={{ maxLength: 100 }}
            helperText={`${title.length}/100 字符`}
            sx={{
              '& .MuiOutlinedInput-root': {
                '&:hover fieldset': {
                  borderColor: '#2196f3',
                },
                '&.Mui-focused fieldset': {
                  borderColor: '#2196f3',
                },
              },
            }}
          />

          {/* 内容描述输入 */}
          <TextField
            label="内容描述"
            value={textContent}
            onChange={(e) => onChange({ textContent: e.target.value })}
            placeholder="请输入内容描述..."
            fullWidth
            required
            multiline
            rows={6}
            variant="outlined"
            inputProps={{ maxLength: 5000 }}
            helperText={`${textContent.length}/5000 字符`}
            sx={{
              '& .MuiOutlinedInput-root': {
                '&:hover fieldset': {
                  borderColor: '#2196f3',
                },
                '&.Mui-focused fieldset': {
                  borderColor: '#2196f3',
                },
              },
            }}
          />
        </Box>
      </Paper>

      {/* 提示信息 */}
      <Box sx={{ mt: 3 }}>
        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
          💡 提示：好的标题和描述能帮助更多人发现你的内容
        </Typography>
      </Box>
    </Box>
  );
};

export default ContentInfoForm; 